/*
    HMR(hot module replacement) 热模块的替换
        作用：一个模块发生了变化，只会重新打包这一个模块 （而不是打包所有模块）
            极大提升了构建速度

        样式文件： 直接在devServer中配置hot: true 即可 因为style-loader内部实现了
        js文件： 配置hot: true 默认不能使用HMR功能
            解决：
            if (module.hot) {
                // 一旦module.hot存在，这说明开启了HMR功能， 则下面的代码会生效
                module.hot.accept("./print.js", function () {
                    // 监听print.js文件的变化，一旦发生变化，其他模块默认不会重新打包构建。
                    // 会执行后面的回调函数
                    console.log(module)
                })
            }
            HMR功能只能处理非入口js文件（因为其他文件必在入口文件加载，入口文件改变的时候，其他文件必重新加载）
        html文件：配置hot: true 默认不能使用HMR功能，并且，html文件不能进行实时的更新了 （单页面应用只有一个html文件，不需要做HMR）
                解决：修改entry入口，将html文件引入 这样可以解决热更新的问题
*/

const { resolve } = require("path")
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
    // entry: "./index.js",
    entry: ["./index.js", "./index.html"],
    output: {
        filename: "build.js",
        path: resolve(__dirname, "build")
    },
    module: {
        rules: [
            // loader配置
            {
                // 处理less资源
                test: /\.less$/,
                use: [
                    "style-loader",
                    "css-loader",
                    "less-loader"
                ]
            },
            {
                // 处理css资源
                test: /\.css$/,
                use: [
                    "style-loader",
                    "css-loader",
                ]
            },
            {
                // 处理图片资源
                test: /\.(png|jpg|gif)$/,
                loader: "url-loader",
                options: {
                    limit: 8 * 1024,
                    name: "[hash:5].[ext]",
                    // 关闭es6的module 而开启commonjs的module, 与file-loader保持一致
                    esmodule: false,
                    outputPath: "imgs"
                }
            },
            {
                // 处理html中img标签的
                test: /\.html$/,
                loader: "html-loader"
            },
            {
                // 处理其他资源
                exclude: /\.(html|css|less|js|jpg|png|gif)$/,
                loader: "file-loader",
                options: {
                    name: "[hash:5].[ext]",
                    outputPath: "medias"
                }
            }
        ]
    },
    plugins: [
        // plugins的配置
        new HtmlWebpackPlugin({
            template: "index.html"
        })
    ],
    mode: "development",
    devServer: {
        contentBase: resolve(__dirname, "build"),
        compress: true,
        port: 3000,
        open: true,
        // 开启HMR功能
        hot: true
    }
}